<!--<script setup>
</script>
<template>
支付申请
</template>
<style scoped>
</style>-->
<script setup>
import { ref, computed } from 'vue';
import { ElTable, ElTableColumn, ElForm, ElFormItem, ElSelect, ElOption, ElButton } from 'element-plus';
import { useStore } from 'vuex';
import router from "@/router";

const store = useStore();
const applications = ref([]);
const searchDepartment = ref('');
const approvalStatus = ref('');

const departments = ref([
  { id: 1, name: '技术部' },
  { id: 2, name: '人事部' },
  // 更多部门...
]);

const fetchApplications = async () => {
  // 调用 API 获取数据
  console.log('查询条件:', { department: searchDepartment.value, status: approvalStatus.value });
  // 模拟数据
  applications.value = [
    { id: 1, department: '技术部', status: '审批中', applicant: '张三', submitDate: '2023-05-01' },
    // 更多数据...
  ];
};
const goToApplicationForm = async ()=>{
  router.push('/account/butieman/paylist')
}

const viewApplication = (application) => {
  console.log('查看申请:', application);
  // 跳转到查看页面
  router.push('/account/manage/chuchai')
};

const editApplication = (application) => {
  console.log('修改申请:', application);
  // 跳转到编辑页面
  router.push('/account/butieman/paylist')
};

const revokeApplication = (application) => {
  console.log('撤销申请:', application);
  // 调用 API 撤销申请
  alert('撤销成功');
};

</script>
<template>
  <div class="payment-application-list">
    <el-form inline>
      <el-form-item label="部门">
        <el-select v-model="searchDepartment" placeholder="请选择部门">
          <el-option v-for="department in departments" :key="department.id" :label="department.name" :value="department.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审批状态">
        <el-select v-model="approvalStatus" placeholder="请选择审批状态">
          <el-option label="审批中" value="pending"></el-option>
          <el-option label="已通过" value="approved"></el-option>
          <el-option label="已驳回" value="rejected"></el-option>
          <el-option label="已拒绝" value="denied"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchApplications">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="goToApplicationForm">申请</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="applications" style="width: 100%">
      <el-table-column prop="department" label="部门"></el-table-column>
      <el-table-column prop="status" label="审批状态"></el-table-column>
      <el-table-column prop="applicant" label="申请人"></el-table-column>
      <el-table-column prop="submitDate" label="提交时间"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="viewApplication(row)">查看</el-button>
          <el-button type="text" @click="editApplication(row)">修改</el-button>
          <el-button type="text" @click="revokeApplication(row)">撤销</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped>
.payment-application-list {
  padding: 20px;
}

.el-form-item {
  margin-bottom: 10px;
}

.el-table {
  margin-top: 20px;
}
</style>